<!--意见反馈feedback-->
<template>
  <div class="feedback">
  	 <div class="feedback-header">
      <mt-header title="意见反馈">
        <router-link to="/my" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="feedback-title">
   <p>您的反馈是</p>
   <mt-radio
  v-model="value"
  :options="['咨询', '建议', '其他']">
</mt-radio>
    </div>
    <div class="feedback-content">
    	<div class="info-1">
    		<p>意见反馈:</p>
    	<textarea placeholder="我们将为您不断改进..." v-model='message'></textarea>
    	</div>
    	<div class="info-2">
    		<mt-field label="邮箱(选填)" placeholder="请输入邮箱" type="email" v-model="email" @change='sendcodeEmail'></mt-field>
    	</div>
    	<div class="info-3">
    		<mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone" @change='sendcodePhone'></mt-field>
    	</div>

    	<div class="info-4">
            <div class='err'><p v-show='errType'>{{err}}</p></div>
    		<mt-button size="large" class='backgrounds' @click='push' :disabled='errType' >提交</mt-button>
    	</div>
    </div>
  </div>
</template>

<script typy="text/ecmascript-6">
 export default{
 	data () {
		return {
	    value:'咨询',
        email:'',
        phone:'',
        message:'',
        err:'请输入正确的邮箱',
        errType:false
		}
 	},
     methods:{
         sendcodePhone(){
//             手机正则校验
            const that = this;
            if(that.phone === ''){
                that.errType = true;
                that.err = '手机号不能为空！';
                return false
            }else if(!(/^1[34578]\d{9}$/.test(that.phone))){
                 that.errType = true;
                 that.err = '请输入正确的手机号码！';
                 return false;
             }else {
                 that.errType = false;
                return false
             }

        },
         sendcodeEmail(){
//             邮箱正则校验
             const that = this;
             const regex = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")
             if(that.email === ''){
                 that.errType = true;
                 that.err = '邮箱不能为空！';
                 return false
             }else if(!regex.test(that.email)){
                 that.errType = true;
                 that.err = '邮箱输入不正确！';
                 return false
             }else {
                 that.errType = false;
                 return false
             }

         },
 	    push(){
 	        const that = this;
            var type = 1;
            if(this.value == '咨询'){
                type = 1;
            }else if(this.value == '反馈'){
                type = 2;
            }else {
                type = 3;
            }
            const params = {
                token:that.getToken(),
                type:type,
                content:that.message,
                email:that.email,
                phone:that.phone
            }
            const url = this.getUrl('home/feedback')
            that.$http.post(url,params,{emulateJSON: true}).then(function (res) {
                if(res.data.code === 0){
                    this.$messagebox('提示', '感谢您的宝贵意见！');
                }else {
                    this.$messagebox('提示', res.data.errMsg);
                    return false
                }
                that.message = '',
                    that.email = '',
                    that.phone = ''
            }, function (err) {
                this.$messagebox('提示', '找不到服务器，请稍后再试');
            })
        }
    }
 }
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  @import "../../lib/less/normalize";
  .feedback{
  	.feedback-header{
  		header{
  			background: #fff;
  			color: #666;
  		}
  	}
  	.feedback-title{
  		.mt(5);
  		.padding(0,10);
  		border-bottom: 1px solid #ccc;
  		p{
  			.fs(15);
  		}
  		background: #fff;
  		.mint-radiolist{
  		display: flex;
  		width: 100%;
  		background-image:none;
  		.mint-radiolist-title{
  			margin: 0;
  		}
  	.mint-cell{
  		flex: 1;
  		background-image:none;
  		.mint-cell-wrapper{
  			background-image:none;
  		}
  	}
  	}
  	}
  	.feedback-content{
  		width: 100%;
  		background: #fff;
  		.info-1{
  			.padding(0,10);
  			p{
  				.fs(16);
  			}
  			textarea{
  				.pt(10);
  				width: 100%;
  				.fs(14);
  				color: #666;
  				.h(100);
  				border: none;
  			}
  		}
  		.info-2{
  			border-top: 10px solid #f4f4f4;
  		}
  		.info-3{
  			border-top: 10px solid #f4f4f4;
  		}
  		.info-4{
  			.padding(0,20);
  					border-top: 10px solid #f4f4f4;
  			box-sizing: border-box;
            text-align: center;
            p{
                .fs(16);
                color:red;
                .mb(10);
            }
  			button{
  					color:#fff;
  			}
  		}

  	}


  }
</style>
